{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Tasks</h2>
        <a href="{% url 'tasks:task-create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> New Task
        </a>
    </div>

    <!-- Filter Form -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="status" class="form-label">Status</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="todo" {% if request.GET.status == 'todo' %}selected{% endif %}>To Do</option>
                        <option value="in_progress" {% if request.GET.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                        <option value="review" {% if request.GET.status == 'review' %}selected{% endif %}>In Review</option>
                        <option value="done" {% if request.GET.status == 'done' %}selected{% endif %}>Done</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="priority" class="form-label">Priority</label>
                    <select name="priority" id="priority" class="form-select">
                        <option value="">All Priorities</option>
                        <option value="low" {% if request.GET.priority == 'low' %}selected{% endif %}>Low</option>
                        <option value="medium" {% if request.GET.priority == 'medium' %}selected{% endif %}>Medium</option>
                        <option value="high" {% if request.GET.priority == 'high' %}selected{% endif %}>High</option>
                        <option value="urgent" {% if request.GET.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="q" class="form-label">Search</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="q" name="q" 
                               placeholder="Search tasks..." value="{{ request.GET.q }}">
                        <button class="btn btn-outline-secondary" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">Filter</button>
                    <a href="{% url 'tasks:task-list' %}" class="btn btn-outline-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Tasks List -->
    <div class="card">
        <div class="card-body">
            {% if tasks %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Priority</th>
                                <th>Due Date</th>
                                <th>Assigned To</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for task in tasks %}
                            <tr>
                                <td>
                                    <a href="{% url 'tasks:task-detail' task.id %}">
                                        {{ task.title|truncatechars:50 }}
                                    </a>
                                    {% if task.due_date and task.is_overdue %}
                                        <span class="badge bg-danger">Overdue</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.get_status_display|lower }}">
                                        {{ task.get_status_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{{ task.get_priority_display|lower }}">
                                        {{ task.get_priority_display }}
                                    </span>
                                </td>
                                <td>
                                    {% if task.due_date %}
                                        {{ task.due_date|date:"M d, Y" }}
                                    {% else %}
                                        <span class="text-muted">No due date</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if task.assigned_to %}
                                        {{ task.assigned_to.get_full_name|default:task.assigned_to.username }}
                                    {% else %}
                                        <span class="text-muted">Unassigned</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{% url 'tasks:task-detail' task.id %}" class="btn btn-info" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if user == task.created_by or user == task.assigned_to or user.is_staff %}
                                            <a href="{% url 'tasks:task-update' task.id %}" class="btn btn-warning" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        {% endif %}
                                        {% if user == task.created_by or user.is_staff %}
                                            <a href="{% url 'tasks:task-delete' task.id %}" class="btn btn-danger" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="First">
                                        <span aria-hidden="true">&laquo;&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" aria-label="Last">
                                        <span aria-hidden="true">&raquo;&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="alert alert-info">
                    No tasks found. <a href="{% url 'tasks:task-create' %}">Create a new task</a> to get started.
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-submit filter form when dropdowns change
    document.addEventListener('DOMContentLoaded', function() {
        const filterSelects = document.querySelectorAll('#status, #priority');
        filterSelects.forEach(select => {
            select.addEventListener('change', function() {
                this.form.submit();
            });
        });
    });
</script>
{% endblock %}